<template>
  <div class="wrap">
    <el-form
      class="custom-form"
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      status-icon
      :inline="true"
    >
      <div class="wrap-left">
        <div class="wrap-left-form">
          <div class="form-group-title">基本信息</div>
          <div class="form-item-info">
            <el-form-item
              class="form-itme-width_50"
              label="可行性报告"
              id="demandCode"
              prop="demandCode"
            >
              <el-input
                :value="formData.demandCode"
                placeholder="请选择可行性评估"
                :disabled="isShow"
                clearable
                @click="openfeasibilityList"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="行业类别"
              id="industryDictId"
              prop="industryDictId"
            >
              <el-select
                v-model="formData.industryDictId"
                clearable
                placeholder="请选择行业类别"
                :disabled="isShow"
              >
                <el-option
                  v-for="item in DC_CRM_SECTOR"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="项目名称"
              id="projectName"
              prop="projectName"
            >
              <el-input
                v-model="formData.projectName"
                placeholder="请输入项目名称"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="项目编码"
              id="projectCode"
              prop="projectCode"
            >
              <el-input v-model="formData.projectCode" placeholder="<系统自动生成>" disabled />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="商机名称"
              id="opportunitiyId"
              prop="opportunitiyId"
            >
              <dc-select-dialog
                v-model="formData.opportunitiyId"
                type="input"
                objectName="opps"
                placeholder="请选择商机名称"
                :multiple="false"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="商机编码"
              id="opportunitiyCode"
              prop="opportunitiyCode"
            >
              <el-input v-model="formData.opportunitiyCode" placeholder="<系统自动生成>" disabled />
            </el-form-item>
            <el-form-item class="form-itme-width_50" label="客户" id="customerId" prop="customerId">
              <dc-select-remote
                v-model="formData.customerId"
                placeholder="请选择客户"
                objectName="customer"
                :multiple="false"
                :multiple-limit="1"
                :clearable="true"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="终端客户"
              id="endCustomerId"
              prop="endCustomerId"
            >
              <el-input
                v-model="formData.endCustomerId"
                placeholder="请输入终端客户"
                :disabled="isShow"
                clearable
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="设备种类"
              id="quipmentDictId"
              prop="quipmentDictId"
            >
              <el-select
                v-model="formData.quipmentDictId"
                clearable
                placeholder="请选择"
                :disabled="isShow"
              >
                <el-option
                  v-for="item in DC_PMS_PROJECT_QIOPMENT"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              class="form-itme-width_50"
              label="项目类型"
              id="projectDictId"
              prop="projectDictId"
            >
              <el-select
                v-model="formData.projectDictId"
                clearable
                placeholder="请选择项目类型"
                :disabled="isShow"
              >
                <el-option
                  v-for="item in DC_PMS_PROJECT_TYPE"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="订单类型"
              id="orderTypeDictId"
              prop="orderTypeDictId"
            >
              <el-select
                v-model="formData.orderTypeDictId"
                clearable
                placeholder="请选择订单类型"
                :disabled="isShow"
              >
                <el-option
                  v-for="item in DC_PMS_PROJECT_ORDER"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="项目阶段"
              id="phaseDictId"
              prop="phaseDictId"
            >
              <el-cascader
                class="w-full"
                v-model="formData.phaseDictId"
                :options="DC_PMS_PROJECT_PHASE"
                :props="{
                  checkStrictly: true,
                  value: 'dictKey',
                  label: 'dictValue',
                  emitPath: false,
                }"
                placeholder="请选择"
                @change="changeProjectPhase"
                clearable
              />
            </el-form-item>
            <el-form-item class="form-itme-width_50" label="所属组织" id="orgId" prop="orgId">
              <dc-select
                v-model="formData.orgId"
                objectName="org"
                placeholder="请选择"
                :disabled="isShow"
                clearable
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_100"
              label="评估说明"
              id="assessment"
              prop="assessment"
            >
              <el-input
                v-model="formData.assessment"
                autosize
                type="textarea"
                placeholder="请输入"
                :disabled="isShow"
              />
            </el-form-item>
            <div
              class="form-group-title"
              v-if="!!formData.phaseDictId && formData.phaseDictId !== 'DC_PMS_PROJECT_PHASE_MP'"
            >
              项目阶段
            </div>
            <el-table
              v-if="!!formData.phaseDictId && formData.phaseDictId !== 'DC_PMS_PROJECT_PHASE_MP'"
              :data="formData.dcPmsProjectPhaseList"
              max-height="600"
              width="100%"
              border
            >
              <el-table-column prop="phaseCode" label="项目阶段" width="160" align="center">
                <template #default="scoped">
                  <dc-dict-key :options="DC_PMS_PROJECT_PHASE" :value="scoped.row.phaseCode" />
                </template>
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间/结束时间"
                min-width="200"
                align="center"
              >
                <template #default="scoped">
                  <dc-date-range
                    v-model:startDate="scoped.row.startTime"
                    v-model:endDate="scoped.row.endTime"
                    valueFormat="YYYY-MM-DD"
                    :clearable="true"
                    :disabled="isShow"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="notes" label="备注" min-width="200" align="center">
                <template #default="scoped">
                  <el-input
                    v-model="scoped.row.notes"
                    placeholder="请输入备注"
                    type="textarea"
                    :disabled="isShow"
                  />
                </template>
              </el-table-column>
            </el-table>
            <div class="form-group-title">项目部门DRI</div>
            <el-form-item
              class="form-itme-width_50"
              label="机构DRI"
              id="institutionsDriId"
              prop="institutionsDriId"
            >
              <dc-select-user
                v-model="formData.institutionsDriId"
                placeholder="请选择机构DRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="电气DRI"
              id="electricalDriId"
              prop="electricalDriId"
            >
              <dc-select-user
                v-model="formData.electricalDriId"
                placeholder="请选择电气DRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="软件DRI"
              id="softwareDriId"
              prop="softwareDriId"
            >
              <dc-select-user
                v-model="formData.softwareDriId"
                placeholder="请选择软件DRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item class="form-itme-width_50" label="BDDRI" id="bdDriId" prop="bdDriId">
              <dc-select-user
                v-model="formData.bdDriId"
                placeholder="请选择BDDRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item class="form-itme-width_50" label="TPMDRI" id="tpmDriId" prop="tpmDriId">
              <dc-select-user
                v-model="formData.tpmDriId"
                placeholder="请选择TPMDRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item class="form-itme-width_50" label="PMDRI" id="pmDriId" prop="pmDriId">
              <dc-select-user
                v-model="formData.pmDriId"
                placeholder="请选择PMDRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="视觉DRI"
              id="versionDriId"
              prop="versionDriId"
            >
              <dc-select-user
                v-model="formData.versionDriId"
                placeholder="请选择视觉DRI"
                :multiple="false"
                :multiple-limit="1"
                :disabled="isShow"
              />
            </el-form-item>
            <div class="form-group-title">工艺&产品</div>
            <el-form-item
              class="form-itme-width_50"
              label="设备工艺"
              id="technologyDictId"
              prop="technologyDictId"
            >
              <el-select
                v-model="formData.technologyDictId"
                multiple
                clearable
                placeholder="请选择设备工艺"
                :disabled="isShow"
              >
                <el-option
                  v-for="item in DC_PMS_PROJECT_TECHNOLOGY"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="其他工艺"
              id="criticalTechnology"
              prop="criticalTechnology"
            >
              <el-input
                v-model="formData.criticalTechnology"
                placeholder="请输入其他工艺"
                :disabled="isShow"
                clearable
              />
            </el-form-item>
            <!--            <el-form-item-->
            <!--              class="form-itme-width_50"-->
            <!--              label="设备属性"-->
            <!--              id="deviceTypeId"-->
            <!--              prop="deviceTypeId"-->
            <!--            >-->
            <!--              <el-select-->
            <!--                v-model="formData.deviceTypeId"-->
            <!--                clearable-->
            <!--                placeholder="请选择设备属性"-->
            <!--                :disabled="isShow"-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  v-for="item in DC_PMS_PROJECT_DEVICE"-->
            <!--                  :key="item.value"-->
            <!--                  :label="item.label"-->
            <!--                  :value="item.value"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item class="form-itme-width_50" label="产能" id="capacity" prop="capacity">
              <el-input
                v-model="formData.capacity"
                placeholder="请输入产能"
                :disabled="isShow"
                clearable
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="客户产品"
              id="customerProducts"
              prop="customerProducts"
            >
              <el-input
                v-model="formData.customerProducts"
                placeholder="请输入客户产品"
                :disabled="isShow"
                clearable
              />
            </el-form-item>
            <el-form-item
              class="form-itme-width_50"
              label="产品系列"
              id="productRange"
              prop="productRange"
            >
              <el-input
                v-model="formData.productRange"
                placeholder="请输入产品系列"
                :disabled="isShow"
                clearable
              />
            </el-form-item>
            <div class="form-group-title">相关附件</div>
            <el-form-item class="form-itme-width_100" label="相关附件" id="fileId" prop="fileId">
              <dc-upload
                v-model="formData.fileId"
                :limit="10"
                :targetType="Const.targetType.CUSTOMER"
              />
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="wrap-right">
        <div class="wrap-right-scroll">
          <div class="wrap-right-content">
            <div class="wrap-right-content-title" @click="anchorPoint('demandCode')">
              {{ formData.demandCode || '-' }}
            </div>
            <div class="wrap-right-content-title">基本信息</div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('demandCode')">
              <div class="label">可行性评估</div>
              <div class="value ellipsis">
                {{ formData.demandCode }}
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('industryDictId')">
              <div class="label">行业类别</div>
              <div class="value ellipsis">
                <dc-dict
                  type="text"
                  :options="DC_CRM_SECTOR"
                  :value="formData.industryDictId"
                  v-if="formData.industryDictId"
                />
                <span v-else>-</span>
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('industryDictId')">
              <div class="label">项目名称</div>
              <div class="value ellipsis">
                {{ formData.projectName }}
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('projectCode')">
              <div class="label">项目编码</div>
              <div class="value ellipsis"><系统自动生成></div>
            </div>

            <div class="wrap-right-vicecontent" @click="anchorPoint('opportunitiyId')">
              <div class="label">商机名称</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.opportunitiyId" objectName="opps" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('opportunitiyCode')">
              <div class="label">商机编码</div>
              <div class="value ellipsis"><系统自动生成></div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('customerId')">
              <div class="label">客户</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.customerId" objectName="customer" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('endCustomerId')">
              <div class="label">终端客户</div>
              <div class="value ellipsis">
                {{ formData.endCustomerId || '-' }}
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('quipmentDictId')">
              <div class="label">设备种类</div>
              <div class="value ellipsis">
                <dc-dict
                  type="text"
                  :options="DC_PMS_PROJECT_QIOPMENT"
                  :value="formData.quipmentDictId"
                  v-if="formData.quipmentDictId"
                />
                <span v-else>-</span>
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('projectDictId')">
              <div class="label">项目类型</div>
              <div class="value ellipsis">
                <dc-dict
                  type="text"
                  :options="DC_PMS_PROJECT_TYPE"
                  :value="formData.projectDictId"
                  v-if="formData.projectDictId"
                />
                <span v-else>-</span>
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('orderTypeDictId')">
              <div class="label">订单类型</div>
              <div class="value ellipsis">
                <dc-dict
                  type="text"
                  :options="DC_PMS_PROJECT_ORDER"
                  :value="formData.orderTypeDictId"
                  v-if="formData.orderTypeDictId"
                />
                <span v-else>-</span>
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('phaseDictId')">
              <div class="label">项目阶段</div>
              <div class="value ellipsis">
                <dc-dict-key
                  :options="DC_PMS_PROJECT_PHASE"
                  :value="formData.phaseDictId"
                  v-if="formData.phaseDictId"
                />
                <span v-else>-</span>
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('assessment')">
              <div class="label">评估说明</div>
              <div class="value ellipsis">
                {{ formData.assessment }}
              </div>
            </div>
            <div class="wrap-right-content-title">项目部门DRI</div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('institutionsDriId')">
              <div class="label">机构DRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.institutionsDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('electricalDriId')">
              <div class="label">电气DRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.electricalDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('softwareDriId')">
              <div class="label">软件DRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.softwareDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('bdDriId')">
              <div class="label">BDDRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.bdDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('tpmDriId')">
              <div class="label">TPMDRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.tpmDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('pmDriId')">
              <div class="label">PMDRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.pmDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('versionDriId')">
              <div class="label">视觉DRI</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.versionDriId" objectName="user" />
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('pmDriId')">
              <div class="label">视觉DRI</div>
              <div class="value ellipsis">
                {{ formData.versionDriId?.realName || '-' }}
              </div>
            </div>
            <!--            <div class="wrap-right-vicecontent" @click="anchorPoint('pmcDriId')">-->
            <!--              <div class="label">PMCDRI</div>-->
            <!--              <div class="value ellipsis">-->
            <!--                {{ formData.pmcDriId?.realName || '-' }}-->
            <!--              </div>-->
            <!--            </div>-->
            <div class="wrap-right-vicecontent" @click="anchorPoint('orgId')">
              <div class="label">所属组织</div>
              <div class="value ellipsis">
                <dc-view v-model="formData.orgId" objectName="org" />
              </div>
            </div>
            <div class="wrap-right-content-title">工艺&产品</div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('technologyDictId')">
              <div class="label">设备工艺</div>
              <div class="value ellipsis">
                <span v-for="(item, index) in formData.technologyDictId" :key="index">
                  <dc-dict
                    type="text"
                    :options="DC_PMS_PROJECT_TECHNOLOGY"
                    :value="item"
                    v-if="item"
                  />
                  <span v-else>-</span>
                  <!-- 如果不是最后一个项，添加逗号 -->
                  <span v-if="index < formData.technologyDictId.length - 1">, </span>
                </span>
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('criticalTechnology')">
              <div class="label">其他工艺</div>
              <div class="value ellipsis">
                {{ formData.criticalTechnology || '-' }}
              </div>
            </div>
            <div class="wrap-right-vicecontent" @click="anchorPoint('capacity')">
              <div class="label">产能</div>
              <div class="value ellipsis">
                {{ formData.capacity || '-' }}
              </div>
            </div>

            <div class="wrap-right-vicecontent" @click="anchorPoint('customerProducts')">
              <div class="label">客户产品</div>
              <div class="value ellipsis">
                {{ formData.customerProducts || '-' }}
              </div>
            </div>

            <div class="wrap-right-vicecontent" @click="anchorPoint('productRange')">
              <div class="label">产品系列</div>
              <div class="value ellipsis">
                {{ formData.productRange || '-' }}
              </div>
            </div>
          </div>
        </div>

        <div class="wrap-right-footer">
          <div class="wrap-right-footer-top">
            <el-popover placement="top" title="信息不完整" :width="300" trigger="click">
              <template #default>
                <div class="unfilled-group">
                  <div
                    class="unfilled-item"
                    v-for="(item, index) in unfilledItems"
                    :key="index"
                    @click="anchorPoint(item.key)"
                  >
                    <div class="unfilled-item_label">{{ item.keyName }}</div>
                    <div class="unfilled-item_value ellipsis">信息为空，请选择</div>
                  </div>
                </div>
              </template>

              <template #reference>
                <div class="unfilled-box">
                  {{ unfilledItems.length }}项不完善
                  <el-icon class="arrow-up-icon">
                    <ArrowUp />
                  </el-icon>
                </div>
              </template>
            </el-popover>
            <el-checkbox
              v-model="uploadChecked"
              :label="`是否进行立项，提交立项信息`"
              size="large"
            />
          </div>
          <div class="wrap-right-footer-btn">
            <el-button type="primary" @click="submitForm">
              {{ route.params.id ? '保存立项' : '保存' }}
            </el-button>
            <el-button type="primary" plain @click="handleDraft">存草稿</el-button>
            <el-button @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
    </el-form>
    <!--    客户需求-->
    <feasibilityList :isDialog="true" @confirm="confirmfeasibilityList" ref="feasibilityListtRef" />
  </div>
</template>

<script setup name="ProjectSubmit">
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import Api from '@/api/index';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import Const from '@/const';

const router = useRouter();
const route = useRoute(); // 获取当前路由对象

const { proxy } = getCurrentInstance();

const {
  DC_CRM_SECTOR,
  DC_PMS_PROJECT_QIOPMENT,
  DC_PMS_PROJECT_TYPE,
  DC_PMS_PROJECT_ORDER,
  DC_PMS_PROJECT_PHASE,
  DC_PMS_PROJECT_TECHNOLOGY,
  DC_PMS_PROJECT_CREATE_STATUS,
} = proxy.useCache([
  { key: 'DC_CRM_SECTOR' },
  { key: 'DC_PMS_PROJECT_QIOPMENT' },
  { key: 'DC_PMS_PROJECT_TYPE' },
  { key: 'DC_PMS_PROJECT_ORDER' },
  { key: 'DC_PMS_PROJECT_PHASE' },
  { key: 'DC_PMS_PROJECT_TECHNOLOGY' },
  // { key: 'DC_PMS_PROJECT_DEVICE' },
  { key: 'DC_PMS_PROJECT_CREATE_STATUS' },
]);

const pageData = reactive({
  loading: true,
  rules: {
    demandCode: [{ required: true, message: '请选择可行性评估', trigger: 'blur' }],
    industryDictId: [{ required: true, message: '请选择行业类别', trigger: 'blur' }],
    projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    quipmentDictId: [{ required: true, message: '请选择设备种类', trigger: 'blur' }],
    phaseDictId: [{ required: true, message: '请选择项目阶段', trigger: 'blur' }],
    projectDictId: [{ required: true, message: '请选择项目类型', trigger: 'blur' }],
    orderTypeDictId: [{ required: true, message: '请选择订单类型', trigger: 'blur' }],
    institutionsDriId: [{ required: true, message: '请选择机构DRI', trigger: 'blur' }],
    electricalDriId: [{ required: true, message: '请选择电气DRI', trigger: 'blur' }],
    softwareDriId: [{ required: true, message: '请选择软件DRI', trigger: 'blur' }],
    bdDriId: [{ required: true, message: '请选择BDDRI', trigger: 'blur' }],
    tpmDriId: [{ required: true, message: '请选择TPMDRI', trigger: 'blur' }],
    pmDriId: [{ required: true, message: '请选择PMDRI', trigger: 'blur' }],
    versionDriId: [{ required: true, message: '请选择视觉DRI', trigger: 'blur' }],
    // pmcDriId: [{ required: true, message: '请选择PMCDRI', trigger: 'blur' }],
    orgId: [{ required: true, message: '请选择所属组织', trigger: 'blur' }],
    // criticalTechnology: [{ required: true, message: '请输入其他工艺', trigger: 'blur' }],
    // deviceTypeId: [{ required: true, message: '请选择设备属性', trigger: 'blur' }],
  },
  keyNames: {
    demandCode: '可行性评估',
    industryDictId: '行业类别',
    projectName: '项目名称',
    quipmentDictId: '设备种类',
    projectDictId: '项目类型',
    orderTypeDictId: '订单类型',
    phaseDictId: '项目阶段',
    institutionsDriId: '机构DRI',
    electricalDriId: '电气DRI',
    softwareDriId: '软件DRI',
    bdDriId: 'BDDRI',
    tpmDriId: 'TPMDRI',
    pmDriId: 'PMDRI',
    versionDriId: '视觉DRI',
    // pmcDriId: 'PMCDRI',
    orgId: '所属组织',
    criticalTechnology: '其他工艺',
    // deviceTypeId: '设备属性',
  },
  formData: {
    demandCode: undefined, //可行性评估
    industryDictId: undefined, //行业类别
    projectName: undefined, //项目名称
    projectCode: undefined, //项目编码
    opportunitiyId: undefined, //商机名称
    opportunitiyCode: undefined, //商机编码
    customerId: undefined, //客户
    endCustomerId: undefined, //终端客户
    quipmentDictId: undefined, //设备种类
    projectDictId: undefined, //项目类型
    orderTypeDictId: undefined, //订单类型
    phaseDictId: undefined, //项目阶段
    assessment: undefined, //评估说明
    dcPmsProjectPhaseList: [], //项目阶段
  },
  isShow: false,
  uploadChecked: true,
  feasibilityListtRef: null,
});

const { loading, rules, formData, keyNames, isShow, uploadChecked, feasibilityListtRef } =
  toRefs(pageData);

// 未填项
const unfilledItems = computed(() => {
  return Object.keys(rules.value)
    .filter(key => {
      if (formData.value[key] instanceof Array && formData.value[key].length === 0) return true;
      if (typeof formData.value[key] === 'string' && !formData.value[key]) return true;
      if (!formData.value[key]) return true;
      return false;
    })
    .map(key => {
      formData.value[key];
      return {
        key,
        keyName: keyNames.value[key],
      };
    });
});

// 用户信息
const userinfo = computed(() => proxy.$store.getters.userInfo);

onMounted(async () => {
  if (route.params.id !== 'create' && !!route.params.id) {
    await getDetail(route.params.id);
  } else {
    initCreate();
  }
});

// 初始化创建
const initCreate = () => {
  formData.value.createUser = userinfo.value.user_id;
  formData.value.createDept = userinfo.value.dept_id;
  formData.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
};

// 获取详情
const getDetail = async id => {
  const res = await Api.pdp.project.detail({
    id,
  });
  const { code, data } = res.data;
  if (code === 200) {
    formData.value = data;
    formData.value.technologyDictId = formData.value.technologyDictId.split(',');
  }
};

// 保存 确认创建
const submitForm = () => {
  if (!uploadChecked.value)
    return proxy.$message.error(
      `请勾选 是否进行立项${route.params.id ? '创建' : '保存'}，提交立项信息`
    );
  loading.value = true;
  proxy.$refs['ruleFormRef'].validate(async valid => {
    if (valid) {
      const form = {
        ...formData.value,
        projectCreateStatusId: DC_PMS_PROJECT_CREATE_STATUS.value[0].id,
        fileId: proxy.arrayToIdsString({
          array: formData.value.fileId,
        }),
        technologyDictId: formData.value.technologyDictId
          ? formData.value.technologyDictId.join(',')
          : undefined,
      };
      const res = await Api.pdp.project.submit(form);
      const { code, msg } = res.data;
      if (code === 200) {
        proxy.$message.success(msg);
        router.push('/pdp/project/list');
      }
    }
  });
  loading.value = false;
};

// 存草稿功能
const handleDraft = async () => {
  loading.value = true;
  if (formData.value.projectName == undefined) {
    proxy.$message.error(`必须项目名称`);
  } else {
    const form = {
      ...formData.value,
      institutionsDriId: formData.value.institutionsDriId || null,
      electricalDriId: formData.value.electricalDriId || null,
      softwareDriId: formData.value.softwareDriId || null,
      bdDriId: formData.value.bdDriId || null,
      tpmDriId: formData.value.tpmDriId || null,
      pmDriId: formData.value.pmDriId || null,
      versionDriId: formData.value.versionDriId || null,
      projectCreateStatusId: DC_PMS_PROJECT_CREATE_STATUS.value[1].id,
      fileId: formData.value.opportunitiyId
        ? proxy.arrayToIdsString({
            array: formData.value.fileId,
          })
        : null,
      technologyDictId: formData.value.technologyDictId
        ? formData.value.technologyDictId.join(',')
        : null,
    };
    const res = await Api.pdp.project.submit(form);
    const { code, msg } = res.data;
    if (code === 200) {
      proxy.$message.success(msg);
      router.push('/pdp/project/list');
    }
  }
  loading.value = false;
};

// 锚点并且检验 form-item
const anchorPoint = id => {
  try {
    proxy.$refs['ruleFormRef'].clearValidate();
    window.location.hash = id;
    proxy.$refs['ruleFormRef'].validateField(id);
  } catch (err) {}
};

// 点击取消跳转商机列表
const cancel = () => {
  proxy
    .$confirm(`确认是否取消新建项目计划?`, {
      confirmButtonText: '确认取消',
      cancelButtonText: '继续创建',
      type: 'warning',
    })
    .then(() => {
      router.push('/pdp/project/list');
    });
};

// 确认可行性评估
const openfeasibilityList = () => {
  feasibilityListtRef.value.openDialog();
};
// 确认可行性评估
const confirmfeasibilityList = data => {
  formData.value.demandCode = data[0].feaName;
  formData.value.customerId = data[0].customerId;
  formData.value.opportunitiyId = data[0].oppsId;
};

// 处理项目阶段变化
const changeProjectPhase = () => {
  if (formData.value.phaseDictId !== 'DC_PMS_PROJECT_PHASE_MP') {
    const dict = findNodeById(DC_PMS_PROJECT_PHASE.value, formData.value.phaseDictId);
    formData.value.dcPmsProjectPhaseList = [];
    if (!!dict?.children) {
      formData.value.dcPmsProjectPhaseList = dict?.children.map(item => {
        return {
          phaseCode: item.dictKey,
          startTime: null,
          endTime: null,
          notes: null,
        };
      });
    } else {
      formData.value.dcPmsProjectPhaseList.push({
        phaseCode: dict.dictKey,
        startTime: null,
        endTime: null,
        notes: null,
      });
    }
  }
};

const findNodeById = (tree, dictKey) => {
  for (const node of tree) {
    if (node.dictKey === dictKey) return node;
    if (node.children && node.children.length) {
      const result = findNodeById(node.children, dictKey);
      if (result) return result;
    }
  }
  return null;
};
</script>
<style lang="scss">
.wrap {
  .custom-form {
    display: flex;
    flex-wrap: wrap;

    .form-item-info {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .form-itme-width {
      &_50 {
        width: 50%;
        margin-right: 0;
      }

      &_100 {
        width: 100%;
        margin-right: 0;
      }
    }

    .tag-group {
      padding: 0 12px;
      width: 100%;
      overflow: auto;

      .placeholder {
        color: var(--el-text-color-placeholder);
      }
    }
  }
}

@media (max-width: 1360px) {
  .form-itme-width_50 {
    width: 100% !important;
    margin-right: 0;
  }
}
</style>
<style scoped lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;

  &-left {
    flex: 1;
    height: 100%;
    overflow: auto;
    background: #fff;
    margin-right: 16px;

    &-form {
      margin: auto;
      padding-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      width: 80%;
    }

    .form-center {
      display: flex;
      flex-wrap: wrap;
    }

    .form-group-title {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 28px 0 32px 0;
      font-weight: 600;
      font-size: 16px;
      color: #333;

      &::before {
        margin-right: 4px;
        display: block;
        content: '';
        width: 4px;
        height: 13px;
        background-color: #f78431;
      }

      .add-box {
        display: flex;
        align-items: center;
        margin-left: 40px;
        font-weight: 400;
        font-size: 14px;
        color: #f78431;
        cursor: pointer;
      }
    }

    .form-item-row {
      width: 93% !important;
    }

    .form-item-width {
      width: 100%;
    }
  }

  &-right {
    width: 460px;
    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    :deep(.el-form-item__label) {
      width: 85px !important;
    }

    &-scroll {
      overflow: auto;
      flex: 1;
    }

    &-content {
      display: flex;
      flex-direction: column;
      padding: 20px;
      gap: 12px;

      &-title {
        height: 32px;
        font-weight: 600;
        font-size: 16px;
        color: #333;
        line-height: 32px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    &-vicecontent {
      display: flex;
      align-items: center;
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-weight: 400;
      font-size: 14px;
      color: #333;

      &:hover {
        background-color: rgba(250, 111, 12, 0.05);

        &::after {
          margin-right: 20px;
          content: '点击可进行锚点定位';
          font-weight: 400;
          font-size: 12px;
          color: #333;
        }
      }

      .label {
        width: 110px;

        &::after {
          content: '：';
        }
      }

      .value {
        display: inline-flex;
        align-items: center;
        flex: 1;
        font-weight: 500;
      }
    }

    &-footer {
      padding-left: 20px;
      border-radius: 8px;
      box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.15);

      &-top {
        display: flex;
        align-items: center;
        padding: 10px;
      }

      &-btn {
        border-top: 1px solid #e5e5e5;
        padding: 16px 0;
      }
    }
  }
}

.show-dialog {
  margin-top: 20px;
  float: right;
}

.backList {
  margin-bottom: 15px;
}

.headeAdd {
  margin-bottom: 15px;
}

.unfilled-box {
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 99px;
  height: 24px;
  background: rgba(225, 33, 55, 0.1);
  font-size: 12px;
  color: #e12137;
  cursor: pointer;

  .arrow-up-icon {
    margin-left: 5px;
  }
}

.unfilled-group {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  .unfilled-item {
    box-sizing: border-box;
    padding: 0 8px;
    display: flex;
    align-items: center;
    width: 277px;
    height: 32px;
    background-color: #f6f8fa;

    &_label {
      width: 90px;
      font-weight: 600;
      font-size: 14px;
      color: #333;
    }

    &_value {
      flex: 1;
      cursor: pointer;
    }
  }
}
</style>
